<html>
	<head>
		<link rel="stylesheet" href="../../static/social/css/style.css">
        <title>Wellcome {{ request.session.first_name }}</title>
	</head>
    <body>
        <div class="alert">
            <p>  <strong>Welcome!</strong> Hello {{ request.session.first_name }}</p>
        </div>
        <div id="mainTop">
            <div id="topContainer">
                <div id="exit">
                    <a href="/logout">
                        <img id="exitImage" src="../../static/social/images/exit.png" >
                    </a>
                </div>
                <div id="home">
                    <a href="/">
                        <img id="homeImage" src="../../static/social/images/homeHover.png" >
                    </a>
                </div>
                <div id="searchSection">
                    <input id="search" type="text" placeholder="Search...">
                </div>
                <div id="notification">
                    <img id="notificationImage" src="../../static/social/images/earth.png" >
                </div>
                <div id="chat">
                    <img id="chatImage" src="../../static/social/images/chat.png">
                </div>
            </div>
        </div>
        <div id="top">
            <img id="topImage" src="../../static/social/images/down.png">
            <div class="top-show-off"></div>
        </div>



        <div id="mainLeft">
            <div id="leftContainer">
                <p> this is test</p>
            </div>
        </div>
        <div id="left">
                <img id="leftImage" src="../../static/social/images/right.png">
                <div class="left-show-off"></div>
        </div>



        <div id="mainRight">
            <div id="rightContainer">
                <p>this is a test</p>
            </div>
        </div>
        <div id="right">
                <img id="rightImage" src="../../static/social/images/left.png">
                <div class="right-show-off"></div>
        </div>


        <div id="mainBottom">
            <div id="bottomContainer">
                <p>this is just for test :))</p>
            </div>
        </div>
        <div id="bottom">
                <img id="bottomImage" src="../../static/social/images/up.png">
                <div class="bottom-show-off"></div>
        </div>


        <div id="mainCenter">
            <div class="leftCenter red">
                <div id="enemyContainer">
                    <textarea id="enemyTextArea" placeholder="share what is you are hating....">
                    </textarea>
                    <button class="button glass red">Share</button>
                </div>
            </div>
            <div class="rightCenter green">
                <div id="friendContainer">
                    <textarea id="friendTextArea" placeholder="share what is in your mind....">
                    </textarea>
                    <button class="button glass green">Share</button>
                </div>
            </div>
        </div>
        <script src="../../static/social/js/jquery-2.0.3.min.js"></script>
        <script src="../../static/social/js/home.js"></script>
    </body>
</html>